<template>
  <div class="_main_content">
    <div style="display: grid;grid-template-columns: 8fr 3fr">
      <div>
        <my-video :url="video.url"></my-video>
      </div>
      <div style="padding: 10px">
        <video-list :video="video"></video-list>
      </div>
    </div>
    <my-divider></my-divider>
    <div style="display: grid;grid-template-columns: 15% 40% 40%">
      <div style="padding-left: 30px">
        <svg-icon class="_svg" size="40px" style="color: lightgrey" name="喜欢" ></svg-icon><span style="display:inline-block;font-size: 14px;padding: 0 20px 0 5px">123</span>
        <svg-icon class="_svg" size="40px" style="color: lightgrey" name="点赞"></svg-icon><span style="font-size: 14px;margin: 0 20px 0 5px">11</span>
      </div>
      <div style="padding-top: 18px">
        <span style="color: #666666">视频：</span>{{this.video.name}}
        <span style="color: #666666;margin-left: 40px">上传人：</span>{{this.video.name}}
      </div>
      <div style="display: grid;grid-template-columns: 80% 20%">
        <my-textarea placeholder="发布评论" v-model="videoNode" :rows="2" :autosize="false" :maxlength="200"></my-textarea>
        <div>
          <my-async-button type="primary" style="margin: 25px 0 0 25px" @click="handleSave">发布</my-async-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import VideoList from "./videoList";
  export default {
    name: "play-index",
    components: {
      'VideoList': VideoList,
    },
    data(){
      return{
        video:{
          fileId: null,
          url: null,
          id: null,
          name: null,
          folder: null
        },
        videoNode: ''
      }
    },
    methods:{
      /** 发布评论 **/
      handleSave(){
        if(!this.videoNode || this.videoNode.trim() == ''){
          this.$message.warning('回复不能为空');
        }else{
          let param = {
            videoId: this.video.id,
            note: this.videoNode
          }
          this.$ajax.saveVideoNote(param).then(()=>{
            this.videoNode = '';
            this.$message.success('发布成功');
          })
        }
      }
    },
    created() {
      this.$ajax.getVideoById(this.$route.params.id).then(res=>{
        this.video.id = res.id;
        this.video.fileId = res.projectFile.id;
        this.video.url = res.projectFile.url;
        this.video.name = res.projectFile.name;
        this.video.folder = res.parentId;
      })
    }
  }
</script>

<style scoped>

</style>
